<style lang="less">
.pay-data {
  display: grid;
  grid-template-rows: 72px 152px 300px 300px 608px;
  row-gap: 12px;

  .pay-data__row {
    .pay-data__row-item {
      box-sizing: border-box;
      padding: 20px;
      height: 100%;
      background: #fff;
      border-radius: 2px;

      .pay-data__row-title {
        color: #262626;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 16px;

        &--more {
          color: #595959;
          font-size: 14px;
        }

        &--between {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .choose-time {
            color: #595959;
            font-size: 14px;

            .time {
              cursor: pointer;

              &.active {
                color: #386cff;
              }

              & + .time {
                margin-left: 16px;
              }
            }
          }
        }
      }
    }

    // 第一行
    &:nth-of-type(1) {
      .pay-data__row-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .update-time {
          color: #101010;
          font-size: 14px;

          .update-time-title {
            margin-right: 8px;
            color: #808080;
          }
        }
      }
    }

    // 第二行
    &:nth-of-type(2) {
      .pay-data__row-content {
        height: 80px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 80px);
        gap: 12px;
        box-sizing: border-box;

        .content__item {
          background: #f4f5f7;
          border-radius: 2px;
          padding: 16px 16px 12px;
          min-width: 243px;

          .content__title {
            margin-bottom: 12px;
            line-height: 16px;
            color: #595959;
            font-size: 12px;

            &--between {
              display: flex;
              justify-content: space-between;
            }
          }

          .content__data {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .data__number {
              color: #262626;
              font-size: 20px;
              font-weight: 600;

              &--yellow {
                color: #ffb53c;
              }
            }

            .data__tip {
              color: #808080;
              font-size: 12px;

              &--red {
                color: #ff3c3c;
              }
            }
          }
        }
      }
    }

    // 第三、四行
    &:nth-of-type(3),
    &:nth-of-type(4) {
      .pay-data__row-content {
        height: 220px;
      }
    }

    // 第五行
    &:nth-of-type(5) {
      display: flex;

      .pay-data__row-item {
        flex: 1;
        min-width: 518px;

        & + .pay-data__row-item {
          margin-left: 12px;
        }

        .pay-data__row-content {
          height: 526px;

          .arco-table-element {
            .arco-table-tr {
              height: 48px;

              .arco-table-td {
                &:nth-last-of-type(1) {
                  .arco-table-td-content {
                    span {
                      cursor: pointer;
                      color: #386cff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<template>
  <div class="pay-data">
    <div class="pay-data__row">
      <div class="pay-data__row-item">
        <a-range-picker
          v-model="searchTime"
          style="width: 240px"
          show-time
          :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="changeDateRange"
        />
        <!-- <p class="update-time">
					<span class="update-time-title">数据更新时间：</span>
					<span>2022-05-26 12:43:13</span>
				</p> -->
      </div>
    </div>
    <div class="pay-data__row">
      <div class="pay-data__row-item">
        <p class="pay-data__row-title">付费数据</p>
        <div class="pay-data__row-content">
          <div v-for="it in payData" :key="it.title" class="content__item">
            <p class="content__title content__title--between">{{ it.title }}</p>
            <!-- <template v-if="it.increaseTitle">
								<p class="content__data">
									<span class="data__number">{{ it.data }}</span>
									<span class="data__tip">{{
									`${it.increaseTitle}: ${it.increaseData}`
									}}</span>
								</p>
								</template>
							<template v-else> -->
            <p class="content__data">
              <span class="data__number">{{ it.data }}</span>
            </p>
            <!-- </template> -->
          </div>
        </div>
      </div>
    </div>
    <div class="pay-data__row">
      <div class="pay-data__row-item">
        <p class="pay-data__row-title pay-data__row-title--between">
          <span> 付费用户新增 </span>
          <a-select
            v-model="echartsData['payUserAdd'].time"
            :style="{ width: '120px' }"
            @change="selectChange('payUserAdd')"
          >
            <a-option v-for="it in selectOptions" :key="it.value" :value="it.value">{{ it.label }}</a-option>
          </a-select>
        </p>
        <div class="pay-data__row-content">
          <echarts-line series-name="付费用户新增" :data="echartsData['payUserAdd'].data" />
        </div>
      </div>
    </div>
    <div class="pay-data__row">
      <div class="pay-data__row-item">
        <p class="pay-data__row-title pay-data__row-title--between">
          <span> 专业版用户新增 </span>
          <a-select
            v-model="echartsData['majorUserAdd'].time"
            :style="{ width: '120px' }"
            @change="selectChange('majorUserAdd')"
          >
            <a-option v-for="it in selectOptions" :key="it.value" :value="it.value">{{ it.label }}</a-option>
          </a-select>
        </p>
        <div class="pay-data__row-content">
          <echarts-line series-name="专业版新增" :data="echartsData['majorUserAdd'].data" />
        </div>
      </div>
    </div>
    <div class="pay-data__row">
      <div class="pay-data__row-item">
        <p class="pay-data__row-title">
          <span> 付费排行 </span>
        </p>
        <div class="pay-data__row-content">
          <a-table :columns="paySortColumns" :data="paySortdata" :pagination="false">
            <template #sort="{ rowIndex }">{{ rowIndex + 1 }}</template>
            <template #orderAmount="{ record }">{{ (record.orderAmount / 100).toFixed(2) }}</template>
            <template #operation="{ record }">
              <span @click="changeDtailsDrawerVisible(true, record.userId)">详情</span>
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </div>
  <user-details-drawer
    :visible="userDetailsDrawerVisible"
    :user-id="userDetailsDrawerUserId"
    @changeDtailsDrawerVisible="changeDtailsDrawerVisible"
    @auth="changeAuthDrawerVisible(true, $event)"
    @close="closeDrawer"
  />
  <auth-drawer
    :visible="authDrawerVisible"
    :auth-data="authData"
    @changeAuthDrawerVisible="changeAuthDrawerVisible"
    @refreshList="getPayRanking"
  />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import echartsLine from '@/components/echartsLine.vue';
import { activity } from '@/api';
import userDetailsDrawer from '@/components/userDetailsDrawer.vue';
import authDrawer from '@/components/authDrawer.vue';
import dateFormat from 'ourwill-feutil/common/dateFormat';

const payData = ref([
  {
    title: '付费用户总数（人）',
    data: '0',
    // increaseTitle: "7日新增",
    // increaseData: "2548",
  },
  {
    title: '首购用户总数（人）',
    data: '0',
    // increaseTitle: "7日新增",
    // increaseData: "0",
  },
  {
    title: '复购用户总数（人）',
    data: '0',
    // increaseTitle: "7日新增",
    // increaseData: "0",
  },
  {
    title: '订单总额（元）',
    data: '0',
  },
  // {
  //   title: "现有专业版用户数（人）",
  //   data: "4,342",
  //   increaseTitle: "7日新增",
  //   increaseData: "2548",
  // },
  // {
  //   title: "历史专业版用户数（人）",
  //   data: "4,342",
  // },
  // {
  //   title: "现有复购专业版用户数（人）",
  //   data: "4,342",
  //   increaseTitle: "7日新增",
  //   increaseData: "2548",
  // },
  // {
  //   title: "历史复购专业版用户数（人）",
  //   data: "4,342",
  // },
]);
// 付费排行
const paySortColumns = [
  {
    title: '排行',
    slotName: 'sort',
  },
  {
    title: '用户昵称',
    dataIndex: 'nickname',
  },
  {
    title: '手机号',
    dataIndex: 'mobPhone',
  },
  {
    title: '付费次数',
    dataIndex: 'orderNum',
  },
  {
    title: '付费金额',
    slotName: 'orderAmount',
  },
  // {
  //   title: "归属人",
  //   dataIndex: "attributor",
  // },
  {
    title: '操作',
    slotName: 'operation',
  },
];
const paySortdata = ref([]);
const selectOptions = [
  {
    label: '按天',
    value: 1,
  },
  {
    label: '按月',
    value: 3,
  },
  {
    label: '按季',
    value: 4,
  },
];

const authDrawerVisible = ref(false);
const authData = ref<object>();

const changeAuthDrawerVisible = (v: boolean, nowAuthData?: object) => {
  authDrawerVisible.value = v;
  if (nowAuthData) {
    authData.value = nowAuthData;
  }
};

const searchTime: any = ref([
  dateFormat(new Date().getTime() - 86400000 * 30, 'YYYY-MM-DD'),
  dateFormat(new Date().getTime(), 'YYYY-MM-DD'),
]);
const getPayData = async () => {
  const params = {
    startDate: searchTime.value[0],
    endDate: searchTime.value[1],
  };
  const { ok, data } = await activity.getPayData(params);
  if (!ok) {
    return;
  }
  payData.value[0].data = data.data.payUserNum;
  payData.value[1].data = data.data.payFirstUserNum;
  payData.value[2].data = data.data.payMulUserNum;
  payData.value[3].data = data.data.orderAmount / 100 + '';
};

const echartsData: any = ref({
  payUserAdd: {
    time: 1,
    dataMethod: () => {
      getPayUserCountEchartsData();
    },
    data: [],
  },
  majorUserAdd: {
    time: 1,
    dataMethod: () => {
      getAddMemberEchartsData();
    },
    data: [],
  },
});
const selectChange = (target: string) => {
  echartsData.value[target].dataMethod();
};
const getPayUserCountEchartsData = async () => {
  const params = {
    startDate: searchTime.value[0],
    endDate: searchTime.value[1],
    type: echartsData.value['payUserAdd'].time,
  };
  const { ok, data } = await activity.getPayUserCountEchartsData(params);
  if (!ok) {
    return;
  }
  echartsData.value['payUserAdd'].data = data.data;
};

const getAddMemberEchartsData = async () => {
  const params = {
    startDate: searchTime.value[0],
    endDate: searchTime.value[1],
    type: echartsData.value['majorUserAdd'].time,
  };
  const { ok, data } = await activity.getAddMemberEchartsData(params);
  if (!ok) {
    return;
  }
  echartsData.value['majorUserAdd'].data = data.data;
};

const getPayRanking = async () => {
  const params = {
    startDate: searchTime.value[0],
    endDate: searchTime.value[1],
  };
  const { ok, data } = await activity.getPayRanking(params);
  if (!ok) {
    return;
  }
  paySortdata.value = data.data;
};

const userDetailsDrawerVisible = ref<boolean>(false);
const userDetailsDrawerUserId: any = ref('');

const changeDtailsDrawerVisible: any = (v: boolean, userId: string) => {
  userDetailsDrawerVisible.value = v;
  if (userId) {
    userDetailsDrawerUserId.value = userId;
  }
};

const closeDrawer = () => {
  userDetailsDrawerVisible.value = false;
};

const init = () => {
  getPayData();
  getPayUserCountEchartsData();
  getAddMemberEchartsData();
  getPayRanking();
};

const changeDateRange = () => {
  init();
};

init();
</script>
